<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style>
        #progress-bar {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            margin-top: 10px;
        }

        #progress {
            width: 0;
            height: 30px;
            background-color: #4caf50;
            text-align: center;
            line-height: 30px;
            color: white;
        }
    </style>
</head>
<body>
<div id="videoid">
    <video id="video" loop width="300"></video>
    <video id="video1" loop width="300" src="https://marry-api.mc626.cc/storage/videos/93f6f6ae92026a23348e53bf2caa4805.mp4"></video>
    <video loop width="300" src="https://v26-web-prime.douyinvod.com/video/tos/cn/tos-cn-ve-15/oEX7AVfBDI4L9XnAljO0SqZ0rBYAdiebiQzSEg/?a=6383&ch=5&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1066&bt=1066&cs=0&ds=6&ft=6ZayzQDMppftTzL8EsO.C_bAja-CIn0Nygdc6B3~oGO~OYpHDDMwMcrX6X8AuusZ.&mime_type=video_mp4&qs=1&rc=OTM5OzhlZWVlNmg4ZzppOkBpM3NveHI5cjxueDMzNGkzM0A0MjAzLmExXzUxLzJeMDZeYSNuYm5mMmRjcmlgLS1kLTBzcw%3D%3D&btag=c0000e00008000&cquery=100o_101s_100B_100H_100K&dy_q=1740900267&expire=1740911073&feature_id=46a7bb47b4fd1280f3d3825bf2b29388&l=202503021524261D6E3F0047B91AB98969&ply_type=4&policy=4&signature=fd3fbba65a63c9a561d36e681c73d974&tk=webid&__vid=7470152377941675283&webid=2665a38a67b429b860eb36d6b07bb78f68ea3052da0a381dc42957d4bedb47da67b1d8f2536b622c1133c5a51a4b27b5d3b841d72e5c6e9a517cd8d4ebac5a3dca4394f89a9fbfaf6d9d579cca74237f47534f5dc1ce909c4b632293c747f68f2a755d2d2ac829e30ad0a8e3da0cf51009ecb5cbe8c32de57f49159161cf9b9e325e2e6fc85b73f5234f2adfaf20318c07d7c7aff6db8351d1b0ab112c7d235c4343ccedf97c27ab8f62067a81c55a853ceaa592dc2c5f80ea016371c5588927-fb8a334d04817a0080d0877d88f7db47&fid=7b36ee9b9f037bbdcff1e50ea1253a71"></video>
</div>
<input id="mp4" type="file" name="video" accept="video/*" required>
<button onclick="upload()">上传视频</button>
<div id="progress-bar">
    <div id="progress">0%</div>
</div>
</body>
<script src="/bb/hls.js"></script>
<script>
    const $ = jQuery;
    const video = document.getElementById('video');
    const video1 = document.getElementById('video1');

    let m3u8Url = "https://marry-api.mc626.cc/storage/videos/93f6f6ae92026a23348e53bf2caa4805_m3u8.m3u8";
    // let m3u8Url = "https://marry-api.mc626.cc/storage/videos/93f6f6ae92026a23348e53bf2caa4805.mp4";
    if (Hls.isSupported()) {
        const hls = new Hls();
        hls.loadSource(m3u8Url);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
            video.play();
            video1.play();
        });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        // 对于Safari浏览器
        video.src = m3u8Url;
        video.addEventListener('loadedmetadata', function () {
            video.play();
        });
    } else {
        console.error('不支持的浏览器');
    }

    function upload() {
        var files = $('#mp4')[0].files;
        if (files.length > 0) {
            var formData = new FormData();
            formData.append('video', files[0]);
            $.ajax({
                url: 'https://marry-api.mc626.cc/api/video/upLoad',
                type: 'POST',
                data: formData,
                headers: {
                    "Authorization": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NDA3MzQ3MzgsImV4cCI6MTc0MDgyMTEzOCwic3ViIjoxNTksInVzZXJfaWQiOjE1OX0.9vGlnGNEFYMKJsZjPXiVtjXNyktvd4LMSBKHRBkMsj8"
                },
                xhr: function () {
                    var xhr = new window.XMLHttpRequest();
                    // 上传进度事件
                    xhr.upload.addEventListener("progress", function (evt) {
                        if (evt.lengthComputable) {
                            var percentComplete = evt.loaded / evt.total;
                            percentComplete = parseInt(percentComplete * 100);
                            // 更新进度条
                            if (percentComplete === 100) percentComplete = 99;
                            $('#progress').css('width', percentComplete + '%');
                            $('#progress').text(percentComplete + '%');
                        }
                    }, false);
                    return xhr;
                },
                processData: false, // 必须设置为 false，以避免 jQuery 自动处理数据
                contentType: false, // 必须设置为 false，以确保正确发送表单数据
                success: function (response) {
                    $('#uploadStatus').html('文件上传成功：' + response.message);
                    $('#progress').css('width', '100%');
                    $('#progress').text('100%');
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#uploadStatus').html('文件上传失败：' + errorThrown);
                }
            });


        } else {
            console.log('没有选择文件');
        }
    }

</script>

</html>
